<!-- 折线图 -->
<template>
    <div class="com-container">
        <div class="title" :style="comStyle">
            <span class="">{{ showTitle }}</span>
            <span class="title-icon" @click.stop.prevent="showChoice = !showChoice">⩒</span>
            <div class="select-con" v-show="showChoice">
                <div class="select-item" v-for="(item,index) in selectList" :key="item.key" @click.stop.prevent="handleSelect(item)">{{ item.text }}</div>
            </div>
        </div>
        <div class="com-chart" ref="RefsTrend"></div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
import { getThemeValue } from '@/utils/theme_utils'
import { getDataJson } from '@/api/index.js';
export default {
    components: {},
    computed: {
        ...mapState(['theme']),
        selectList(){
            if(!this.allData){
                return []
            }else{
                const { type } = this.allData;
                return type.filter(item=>item.key != this.choiceType)
            }
        },
        showTitle(){
            if(!this.allData){
                return ''
            }else{
                return this.allData[this.choiceType].title
            }
        },
        //设置给标题的样式
        comStyle(){
            return {
                fontSize:`${this.titleFontSize}px`,
                color: getThemeValue(this.theme).titleColor
            }
        }
    },
    props: {},
    watch: {
        theme () {
            console.log('主题切换了')
            this.chartInstance.dispose() // 销毁当前的图表
            this.initChart() // 重新以最新的主题名称初始化图表对象
            this.screenAdapter() // 完成屏幕的适配
            this.updateChart() // 更新图表的展示
        }
    },
    data() {
        return {
            chartInstance: null,
            allData: null,//服务器返回的数据
            showChoice:false,//是否显示可选项
            choiceType:'map',//
            choiceName:'',
            titleFontSize:0,
        }
    },
    created(){
        //注册回调函数-在组件创建
        this.$WebSocket.registerCallBack('trendData',this.getData)
    },
    mounted() {
        this.initChart();
        // this.getData(); 取消这一步
        // 通过socket通信,来传递需要获取的数据
        this.$WebSocket.send({
            action:'getData',
            socketType:'trendData',
            chartName:'trend',
            value:""
        })
        window.addEventListener('resize', this.screenAdapter);
        //在页面加载完成时，主动调用一下
        this.screenAdapter()
    },
    destroyed() {
        window.removeEventListener('resize', this.screenAdapter);
         //销毁注册的回调函数-在组件销毁
        this.$WebSocket.unRegisterCallBack('trendData')
    },
    methods: {
        //初始化
        initChart() {
            const _this = this;
            this.chartInstance = this.$Echarts.init(this.$refs.RefsTrend, this.theme);
            const initOptions = {
                grid:{
                    top:'35%',
                    right:'4%',
                    bottom:'1%',
                    left:'3%',
                    containLabel:true,//距离包含坐标轴上的文字 ，如果设置为 true  yAxis类目轴 会 产生效果
                },
                //工具类提示
                tooltip:{
                    trigger:'axis',
                },
                //标题
                legend:{
                    top:'15%',
                    left: 20,
                    icon:'circle'
                },
                xAxis:{
                   type:'category',
                   boundaryGap: false,//默认true 修改为false 就会贴着Y轴
                },
                yAxis:{
                    type:'value'
                }
            }
            this.chartInstance.setOption(initOptions)
        },
        //获取数据
        async getData(data) {
            try {
                // this.allData = await getDataJson('trend');//
                this.allData = data;//
                this.updateChart()
            } catch (error) {
                console.log(error)
            }
        },
        //更新视图，处理数据
        updateChart() {
            const _this = this;
            //半透明的颜色值
            const colorArr1 = [
                'rgba(11, 168, 44, 0.5)',
                'rgba(44, 110, 255, 0.5)',
                'rgba(22, 242, 217, 0.5)',
                'rgba(254, 33, 30, 0.5)',
                'rgba(250, 105, 0, 0.5)'
            ]
            // 全透明的颜色值
            const colorArr2 = [
                'rgba(11, 168, 44, 0)',
                'rgba(44, 110, 255, 0)',
                'rgba(22, 242, 217, 0)',
                'rgba(254, 33, 30, 0)',
                'rgba(250, 105, 0, 0)'
            ]
            
            const { map,common:{month} } = this.allData;
            console.log(month);
            const timerArr = month; //X轴 类目轴 数据，1月 2月 3月
            const valueArr = this.allData[this.choiceType].data;//y轴 series下的数据
            // 配置图例
            const legendArr = valueArr.map(item=>item.name)
            const seriesArr = valueArr.map((item,index)=>{
                return {
                    name:item.name,
                    type:'line',
                    data:item.data,
                    smooth:true,
                    stack:_this.choiceType,//堆叠图效果
                    //填充风格
                    areaStyle:{
                        color:new _this.$Echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:colorArr1[index]},{offset:1,color:colorArr2[index]}])
                    },
                }
            })
            
            const dataOptions = {
                // x 类目轴
                xAxis:{
                    data:timerArr
                },
                legend:{
                    data:legendArr
                },
                series:seriesArr
            }
            this.chartInstance.setOption(dataOptions)
        },

        // 当浏览器的大小发生变化的时候，会调用方法，来完成屏幕的适配
        screenAdapter() {
            this.$nextTick(() => {
                this.titleFontSize = this.$refs.RefsTrend.offsetWidth / 100 * 3.6;
                //分辨率大小的相关配置项
                const adapterOptions = {
                    // 图例大小与 文字大小调整
                    legend:{
                        itemWidth:this.titleFontSize,
                        itemHeight:this.titleFontSize,
                        itemGap:this.titleFontSize,
                        textStyle:{
                            fontSize:this.titleFontSize / 2
                        }
                    }
                }
                this.chartInstance.setOption(adapterOptions);
                //重新计算和绘制图表
                this.chartInstance.resize()
            })
        },
        handleSelect({key,text}){
            this.choiceType = key;
            this.showChoice = !this.showChoice;
            this.updateChart()

        }
    }
}
</script>
<style lang='scss' scoped>
.title {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 10;
  color: white;
  .title-icon {
    margin-left: 10px;
    cursor: pointer;
  }
  .select-con {
    background-color: #222733;
  }
}
</style>